<template>
  <div class="article-container">
    <!-- 导航栏-->
     <van-nav-bar
       class="app-nav-bar"
       title="文章详情"
       left-arrow
       @click-left="$router.back()"
     />
     <!-- /导航栏-->

     <div class="article-wrap">
       <h1 class="title">{{ article.title }}</h1>
       <van-cell center class="user-info">
         <div slot="title" class="name">{{ article.aut_name}}</div>
         <van-image
           slot="icon"
           class="avatar"
           round
           fit="cover"
           :src="article.aut_photo"
         />
         <div slot="label" class="pubdate">{{ article.pubdate | relativeTime}}</div>
         <van-button
           class="follow-btn"
           :type="article.is_followed ? 'default' : 'info' "
           :icon="article.is_followed ? '' : 'plus'"
           round
           size="small"
           :loading="isFollowLoading"
           @click="onFollow"
         >{{ article.is_followed ? '已关注' : '关注'}}</van-button>
       </van-cell>
       <div
         class="markdown-body"
         v-html="article.content"
         ref="article-content"
       ></div>
       <!-- 文章评论列表-->
       <comment-list
          :source="articleId"
          :list="commentList"
          @update-total-count="totalCommentCount = $event"
          @reply-click="onReplyClick"
       />
       <!-- /文章评论列表-->
     </div>

     <!-- 底部区域-->
     <div class="article-bottom">
        <van-button
           class="comment-btn"
           type="default"
           round
           size="small"
           @click="isPostShow = true"
        >写评论</van-button>
        <van-icon
          name="comment-o"
          :info="totalCommentCount"
          color="#777"
        />
        <van-icon
          :name="article.is_collected ? 'star' : 'star-o'"
          :color="article.is_collected ? 'orange' : '#777'"
          @click="onCollect"
        />
        <van-icon
          :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
          :color="article.attitude === 1 ? 'hotpink' : '#777'"
          @click="onLike"
        />
        <van-icon
          name="share"
          color="#777"
        />
     </div>

     <!-- /底部区域-->

     <!-- 发布评论-->
     <van-popup
        v-model="isPostShow"
        position="bottom"
     >
     <post-comment
        :target="articleId"
        @post-success="onPostSuccess"
     />
     </van-popup>
     <!-- /发布评论-->

     <!-- 评论回复 -->
     <van-popup
        v-model="isReplyShow"
        position="bottom"
     >
       <!-- 这里使用v-if的目的是让组件随着弹出层的显示进行渲染和毁灭，防止加载过的组件不重新渲染导致数据不会重新加载的问题 -->
       <comment-reply
         v-if="isReplyShow"
         :comment="replyComment"
         :article-id="articleId"
         @close="isReplyShow = false"
       />
     </van-popup>
     <!-- 评论回复 -->
  </div>
</template>

<script>
  import './github-markdown.css'
  import { getArticleById,
           addCollect,
           deleteCollect,
           addLike,
           deleteLike
         } from '@/api/article'
  import { ImagePreview } from 'vant'
  import { addFollow, deleteFollow } from '@/api/user.js'
  import { Toast } from 'vant'
  import commentList from './components/comment-list'
  import PostComment from './components/post-comment'
  import CommentReply from './components/comment-reply'

  export default {
   name: 'ArticleIndex',
	 components:{
     commentList,
     PostComment,
     CommentReply
   },
   //在组件中获取动态路由参数：
   //方式一：this.$route.params.articleId
   //方式二:props传参,推荐
	 props:{
     articleId:{
       type:[String,Number,Object],
       required:true
     }
   },
   data () {
     return {
       article:{}, //文章数据对象
       isFollowLoading:false , //关注按钮的loading状态
       isCollectLoading:false, //收藏按钮的loading状态
       isPostShow : false ,//控制评论弹出的显示状态
       commentList: [] ,//文章评论列表
       totalCommentCount:0,//评论总数量
       isReplyShow:false, //控制评论回复的显示状态
       replyComment:{} //当前回复评论对象
     }
   },
	 computed: {},
	 watch: {},
	 created () {
     this.loadArticle()
   },
	 mounted() {},
   methods:{
     async loadArticle () {
       const { data } = await getArticleById(this.articleId)
       this.article = data.data

       //数据改变影响视图更新（DOM数据）不是立即的
       //所以如果需要在修改数据之后马上操作该数据影响视图DOM，需要把这个代码放到$nextTick中
       //this.$nextTick 是vue提供的一个方法
       this.$nextTick(() => {
         this.handlePerviewImage()
       })
     },

     handlePerviewImage () {
       //1.获取文章内容Dom对象
       const articleContent = this.$refs['article-content']

       //2.得到所有的img标签
       //querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素
       const imgs = articleContent.querySelectorAll('img')

       const imgPaths = [] //收集所有的图片路径

       //3.循环img列表，给img注册点击事件
       imgs.forEach((img,index) => {
         imgPaths.push(img.src)
         img.onclick = function(){
           //4.在事件处理函数中调用 ImagePreviev() 预览
           ImagePreview({
             images:imgPaths, //预览图片路径里列表
             startPosition:index ,//起始位置
           })
         }
       })
     },

     async onFollow () {
       this.isFollowLoading = true
       if (this.article.is_followed) {
         //已关注，取消关注
         await deleteFollow(this.article.aut_id)
         //this.article.is_followed = false
       } else {
         //没有关注。添加关注
         await addFollow(this.article.aut_id)
       }
       this.article.is_followed = !this.article.is_followed
       this.isFollowLoading = false
     },

     async onCollect () {
       Toast.loading({
         message: '操作中...',
         forbidClick: true,
       })
       if (this.article.isCollected) {
         //已收藏，取消收藏
         await deleteCollect(this.articleId)
       } else {
         //没有收藏。添加收藏
         await addCollect(this.articleId)
       }
       this.article.is_collected = !this.article.is_collected
       Toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`);
     },

     async onLike () {
       Toast.loading({
         message: '操作中...',
         forbidClick: true,
       })
       if (this.article.attitude === 1) {
         //已点赞，取消点赞
         await deleteLike(this.articleId)
         this.article.attitude = -1

       } else {
         //没有点赞。添加点赞
         await addLike(this.articleId)
         this.article.attitude = 1
       }
       Toast.success(`${this.article.attitude ? '' : '取消'}点赞成功`);
     },

     onPostSuccess (comment) {
      //把发布成功的评论数据对象放到评论列表顶部
        this.commentList.unshift(comment)

        //更新评论的总数量
        this.totalCommentCount++

        //关闭发布评论弹出层
        this.isPostShow = false
     },

     onReplyClick (comment) {
       console.log('onReplyClick',comment)

       this.replyComment = comment

       //展示回复内容
       this.isReplyShow = true
     }
   }
  }
</script>

<style scoped lang="less">
  .title {
    font-size:20px;
    color:#3a3a3a;
    padding:14px;
    background-color:#fff;
    margin:0;
  }

  .article-wrap {
    position:fixed;
    left:0;
    top:46px;
    bottom:44px;
    right:0;
    overflow-y:auto;
  }

  .user-info {
    .avatar {
      width:35px;
      height:35px;
      margin-right:8px;
    }
    .name{
      font-size:14px;
      color:#333333;
    }
    .pubdate{
      font-size:11px;
      color:#b4b4b4;
    }
    .follow-btn {
      width:85px;
      height:29px;
    }
  }

  .article-bottom{
    width:375px;
    height:44px;
    position:fixed;
    bottom:0;
    left:0;
    z-index:999;
    background-color:#ffffff;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    .comment-btn{
      width:150px;
    }
  }
</style>
